<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.outCode" placeholder="出库单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="出库状态"
                style="width: 100%"
                v-model="queryParams.orderStatus"
            >
              <template v-for="(item,index) in out_order_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="订单类型"
                style="width: 100%"
                v-model="queryParams.orderType"
            >
              <template v-for="(item,index) in out_order_type" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.erpCode" placeholder="关联订单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.batchCode" placeholder="波次号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuCode" placeholder="SKU编码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.receiver" placeholder="收货人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.receiverPhone" :maxlength="11"
                      @input="queryParams.receiverPhone=limitIntNumber(queryParams.receiverPhone)" placeholder="手机号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="付款开始时间"
                end-placeholder="付款结束时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"

                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>
    <div>
<!--      <el-button type="primary" @click="clickAddBatch">手工创建波次</el-button>-->
      <el-button type="primary">导出</el-button>
    </div>
    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :tree-config="{transform: true, expandAll: false,rowField: 'outId', parentField: 'parentId'}"
        :checkbox-config="{ checkMethod:visibleMethod,trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号" tree-node ></vxe-column>
      <vxe-column field="outCode"  width="200" title="出库单号"></vxe-column>
      <vxe-column field="orderStatus"  width="110" title="出库单状态">
        <template v-slot="{row}">
          {{ returnDictLabel(out_order_status, row.orderStatus) }}
        </template>
      </vxe-column>
      <vxe-column field="orderType"  width="100" title="订单类型">
        <template v-slot="{row}">
          {{ returnDictLabel(out_order_type, row.orderType) }}
        </template>
      </vxe-column>
      <vxe-column field="erpCode"  width="200" title="关联订单号"></vxe-column>
      <vxe-column field="outNum"  width="100" title="出库数量"></vxe-column>
      <vxe-column field="breedNum"  width="100" title="品种数量"></vxe-column>
<!--      <vxe-column field="batchCode"  width="150" title="波次号"></vxe-column>-->
      <vxe-column field="skuCode"  width="200" title="SKU编码"></vxe-column>
      <vxe-column field="skuName"  width="220" title="商品名称"></vxe-column>
      <vxe-column field="skuImg"  width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.skuImg" :width="150" :height="50" :src="row.skuImg" ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="receiver"  width="150" title="收货人"></vxe-column>
      <vxe-column field="receiverPhone"  width="150" title="手机号"></vxe-column>
      <vxe-column field="receiverAddress"  width="200" title="收货地址"></vxe-column>
      <vxe-column field="remark"  width="220" title="备注"></vxe-column>
      <vxe-column field="erpOrderTime"  width="220" title="客户付款时间"></vxe-column>

<!--      <vxe-column fixed="right"  width="200" title="操作">-->
<!--        <template #default="scope">-->
<!--          <el-button type="text"  style="color:green" @click="chickDetail">查看 </el-button>-->
<!--        </template>-->
<!--      </vxe-column>-->

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>

</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import {batchAddBatch, getOnLineList} from "@/api/scApi";
import {flattenDetailData} from "@/utils/shuangcheng";
import ImagePreview from "@/components/ImagePreview/index.vue";

const { proxy } = getCurrentInstance()

const { out_order_status,out_order_type } = proxy.useDict("out_order_status","out_order_type");

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
let total = ref(0)
let timeData=ref([])
let tableHeight = ref(0);
let loading=ref(false)

nextTick(() => {
  tableHeight.value = window.innerHeight - 350;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 350;
}

onMounted(()=>{
  getList()
})

let tableList = ref([ ])

function getList() {
  loading.value=true
  queryParams.value.erpOrderTimeStart=timeData.value[0]
  queryParams.value.erpOrderTimeEnd=timeData.value[1]

  let params={
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }
  getOnLineList(params).then(res=>{
    loading.value=false
    if(res.code===200){
      tableList.value =flattenDetailData(res.data)
      total.value = res.total

    }
  }).finally(()=>{
    loading.value = false
  })
}

let title=ref("")
function clickAddBatch() {
  let selRows = proxy.$refs.tableRef.getCheckboxRecords()
  if(selRows.length>0){
    let ids =  selRows.map(item=>item.outId)
    proxy.$modal.confirm('是否确认手工创建波次？当前已选择：'+selRows.length).then(() => {
      batchAddBatch({outIds:ids}).then(res=>{
        if(res.code===200){
          proxy.$modal.msgSuccess('创建成功！ 手工波次号：'+res.data)
          getList()
        }
      })
    }).catch(() => {
    });
  }else{
    proxy.$modal.msgWarning("请先选择一行数据!")
  }
}

let isShowDetail = ref(false)

function chickDetail() {
  isShowDetail.value = true
}
const resetQuery = () => {
  timeData.value=[]
  queryParams.value={
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

function visibleMethod({row}) {
  return row.orderStatus == '0'
}

</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
</style>